<!DOCTYPE html>
<html>

<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width,initial-scale=1.0'>
    <meta http-equiv='X-UA-Compatible' content='ie=edge'>
    <title>Document</title>
    <style>
        .router-link-active {
            color: red;
        }
    </style>
</head>

<body>
    <div id='app'>


        <router-link to="/A">热点</router-link>
        <router-link to="/B">教育</router-link>
        <router-link to="/C">社会</router-link>
        <router-link to="/D">音乐</router-link>
        <router-link to="/E">体育</router-link>


        <router-view></router-view>
    </div>
    <script src='./vue.js'></script>
    <script src="./vue-router.js"></script>
    <script>
        // 提供三个组件
        var Acom = {
            template: `<div>AAAAAAAAAAAAA</div>`
        };
        var Bcom = {
            template: `<div>BBBBBBBBBBB</div>`
        };
        var Ccom = {
            template: `<div>CCCCCCCCCC</div>`
        };
        var DcomSub = {
            template: `<div>我是音乐组件中的组件{{$route.params.id}}</div>`
        };

        var Dcom = {
            template: `<div>
                <router-link to="/D/pop">流行</router-link>
                <router-link to="/D/rock">摇滚</router-link>
                <router-link to="/D/cal">古典</router-link>
                <router-view></router-view>
            </div>`
        };
        var Ecom = {
            template: `<div>EEEEEEE</div>`
        };

        // 配置路由
        // var routes = [];
        var routes = [{
            path: '/',
            redirect: '/A'
        }, {
            path: '/A',
            component: Acom
        }, {
            path: '/B',
            component: Bcom
        }, {
            path: '/C',
            component: Ccom
        }, {
            path: '/D',
            component: Dcom,
            // /D/pop
            // /D/rock
            // /D/cal
            // children路由嵌套 值是[路由配置{path,name,....}]
            children: [{
                path: '/D',
                redirect: '/D/pop'
            }, {
                path: '/D/:id',
                component: DcomSub
            }]
        }, {
            path: '/E',
            component: Ecom
        }, ];



        var router = new VueRouter({
            routes
        });
        new Vue({
            el: '#app',
            router,
            data: {

            },
            methods: {


            }
        });
    </script>
</body>

</html>